import Vue from 'vue'
import moment from "moment"

// 日期过滤器
Vue.filter('dateFormat',(value,text)=>{
  if(!value) return ''
  text = text || 'YYYY-MM-DD HH:mm:SS'
  return moment(value).format(text);
})

Vue.directive("shuibowen",{
  bind(el,binding){
    el.addEventListener("click",function(e){
      console.log("click")
      var e = e ||window.event
      var clientX = e.clientX;
      var clientY = e.clientY;
      
      var left = el.offsetLeft;
      var top = el.offsetTop
     
      var x = clientX- left;
      var y = clientY - top ;

      console.log(x,y)
      var span = document.createElement("span")
      span.style.position = "absolute"
      span.style.background = binding.value || 'rgba(0,0,0,0.5)';
      span.style.opacity = 1;
      span.style.borderRadius= "50%"

      el.append(span)
      var width = 0;
      var height = 0;
      var opacity = 1;

      var timer = setInterval(() => {
          width+=5;
          height+=5;
          opacity-= 0.03;
          if(opacity>0){
            span.style.width = width+'px'
            span.style.height  = height+'px'
            span.style.opacity  = opacity;
            span.style.left = x - span.clientWidth/2 + 'px'
            span.style.top = y - span.clientHeight/2 + 'px'


          }else{
            clearInterval(timer)
            timer = null;
            span.remove();
          }
      }, 20);


    },false)
  },
  inserted(el,binding){

  }
})